<template>
  <div>
      <div 
      :class="['item_container',{'goods_active':selectIndex===index}]"
      @click="classClick">
          <div>{{arr.name}}</div>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        arr:{
            type:Object 
        },
        selectIndex:Number,
        index:Number   
    },
    methods:{
        classClick(){
            this.$emit('changeIndex',this.index)
        }
    }
} 
</script>

<style scoped>
.item_container{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .goods-name{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
} */
.goods_active{
    color: red;
    border-left: 2px solid red;
}
</style>